import React from 'react'
import '../css/about.css'
import Event from '../index/Event'

class About extends React.Component {
  constructor(props) {
    super()
    this.state = {
        list:[
            {
                name:'1234',
                fel:false
            },
            {
                name:'1233',
                fel:false
            },
            {
                name:'1232',
                fel:false
            },{
                name:'1231',
                fel:false
            }
        ],
        cp:0,
        check:false,
    }

    

  }


  componentWillMount(){
      Event.addListener('add', (todo)=>{
          this.state.list.push(todo)
          this.setState({
              list:this.state.list
          })
      

      })
      

  

     
  }



  render () {
    return (
        

        <div>
            {
                this.state.list.map((c,i)=>{
                    return  <div className="section" key={i}>
                    <input type="checkbox" checked={c.fel} onClick={()=>{
                        this.state.list[i].fel=!this.state.list[i].fel
                        this.setState({
                            list:this.state.list
                        })


                     let   csd=this.state.list.every((c,i)=>{
                           
                           
                           return  c.fel==true

                            

                        })
                        console.log(csd);
                        this.state.check=csd
                        this.setState({
                            check:this.state.check
                           
                        })

                        if(csd==true){
                            this.refs.dadada.style.display='block'
                        }else{
                            this.refs.dadada.style.display='none'
                        }

                       




                    





                    }}/>
                    <p>{c.name}</p>
                    <button className="remove" onClick={()=>{
                        this.state.list.splice(i,1)
                       
                        this.setState({
                            list:this.state.list
                        })

                        if(this.state.list.length==0){
                            this.setState({
                                check:false
                                
                            })
                          

                        }



                    }}>删除</button>
                </div>
                })


            }


<div className="footer">
            <div>    全选<input  type="checkbox" checked={this.state.check} onClick={()=>{
                
               
                    if(this.state.check==false){

                        this.state.check=true
                        this.refs.dadada.style.display='block'

                        this.setState({
                            cp:this.state.list.length
                        })
                        this.setState({
                            check:this.state.check
                        })


                        this.state.list.map((c,i)=>{
                            c.fel=true
                            
                        })
                        this.setState({
                            list:this.state.list
                        })
                    }else{


                        this.setState({
                            cp:'0'
                        })
                        this.state.check=false
                        this.refs.dadada.style.display='none'

                        this.setState({
                            check:this.state.check
                        })

                        this.state.list.map((c,i)=>{
                            c.fel=false
                            
                        })
                        this.setState({
                            list:this.state.list
                        })

                    }

             



            }}/></div>
            <div>
                已经选择{this.state.cp}/全部{this.state.list.length}
                 

            </div>
            <button ref="dadada" className="allRemove" onClick={()=>{
                this.setState({
                    list:[],
                    check:false,
                    cp:0,
                })
                this.refs.dadada.style.display='none'

            }}>删除所有</button>
        
            

        </div>
            
         




        </div>
   
    )
  }
}

export default About